<template>
  <el-dialog :visible.sync="dialogVisible" title="搜索采购明细" width="1400px" :close-on-click-modal="false"
    append-to-body :modal-append-to-body="false" @close="dialogVisible=false" v-drag2anywhere>
    <el-form :model="filterForm" label-width="0px" size="mini">
      <el-row :gutter="20">
        <el-col style="width:200px">
          <el-form-item >
            <el-input v-model="filterForm.reqcode" placeholder="采购单号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width:200px">
          <el-form-item >
            <el-input v-model="filterForm.title" placeholder="商品名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width:200px">
          <el-form-item >
            <el-input v-model="filterForm.client" placeholder="客户名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width:200px">
          <el-form-item >
            <el-input v-model="filterForm.seller" placeholder="销方单位" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width:200px">
          <el-form-item >
            <el-input v-model="filterForm.buyer" placeholder="购方单位" clearable></el-input>
          </el-form-item>
        </el-col>

       <el-col style="width:200px">
         <el-form-item >
           <el-button type="primary" icon="el-icon-search" @click="handlerFilterSearch">立即查询</el-button>
         </el-form-item>
       </el-col>
      </el-row>
    </el-form>

    <div style="height: 500px;">
      <el-table height="100%" border :data="tableData"  @selection-change="handleSelectionChange" @select-all="handleCheckedChanged" @select="handleCheckedChanged" >
        <el-table-column type="selection" label="选择" align="center" width="50px" fixed="left"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="50px"></el-table-column>
        <el-table-column prop="reqcode" label="采购单号" align="center" width="100px"></el-table-column>
          <el-table-column prop="seller" label="销售单位" align="left" width="150px" show-overflow-tooltip ></el-table-column>
         <el-table-column prop="title" label="商品名称" align="left" width="150px" ></el-table-column>
         <el-table-column prop="model" label="规格型号" align="center" width="120px" show-overflow-tooltip></el-table-column>
         <el-table-column prop="brand" label="品牌" align="center" width="90px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="unit" label="单位" align="center" width="60px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="count" label="可用数量" align="center" width="90px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="采购单价" align="center" width="90px"></el-table-column>
        <el-table-column prop="total" label="采购总价" align="center" width="100px"></el-table-column>
        <el-table-column prop="count" label="关联数量" align="center" width="140px" show-overflow-tooltip>
          <template slot="header">
            <span style="color:#FF0000">关联数量</span>
          </template>
          <template v-slot="scope">
            <el-input-number  v-if="scope.row.checked" v-model="scope.row.readycount" size="mini" :precision="2" :step="0.1" :max="parseFloat(scope.row.count)" style="width: 100%;" @change="handleCountChanged(scope.$index,scope.row)"></el-input-number>
            <span v-if="!scope.row.checked">/</span>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="关联金额" align="center" width="120px" show-overflow-tooltip>
          <template slot="header">
            <span style="color:#FF0000">关联金额</span>
          </template>
          <template v-slot="scope">
            <span v-if="scope.row.checked">{{scope.row.readyrmb}}</span>
            <span v-if="!scope.row.checked">/</span>
          </template>
        </el-table-column>
        <el-table-column prop="client" label="客户" align="center" width="80px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tickettype" label="发票类型" align="center" width="140px" show-overflow-tooltip>
          <template v-slot="scope">
            {{scope.row.tickettype}}({{scope.row.ticketrate}})
          </template>
        </el-table-column>
        <el-table-column prop="reqdate" label="采购日期" align="center" width="140px" show-overflow-tooltip></el-table-column>

        <el-table-column prop="buyer" label="供应商" align="center" width="200px" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
    <div style="display: flex;">
      <div style="text-align: left;flex:1">
        <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
          :current-page="curpage" prev-text="上一页"  next-text="下一页"  :page-sizes="[15, 35, 50]" @size-change="handleSizeChange" @current-change="handleCurrentChange" ></el-pagination>
      </div>
      <div style="line-height: 35px;">关联总额:{{parseFloat(sum_select).toFixed(4)}}</div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium"  @click="handleConfirm">确认选择</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default{
    data(){
      return{
        filterForm:{
           reqcode:'' ,//采购单号
           title:'',
           model:'',
           seller:'' ,
           buyer:'',
           client:''
        },
        curpage:1,
        pagesize:15,
        numrows:1,
        tableData:[],
        dialogVisible:false,
        selection:[],
        sum_select:0,
      }
    },
    methods:{
      initData(buyer){
        console.log(buyer);
        this.filterForm={
           reqcode:'' ,//采购单号
           title:'',
           model:'',
           buyer:buyer ,
           client:''
        };
        this.loadDataList();
      },

      handlerFilterSearch(){
          this.curpage=1;
          this.loadDataList();
      },
      handleCountChanged(index,data){
          this.tableData[index].readyrmb=parseFloat(this.tableData[index].price*this.tableData[index].readycount).toFixed(4);
          this.handleCheckedChanged(this.selection);
      },
      loadDataList(){
         const params={
            reqcode:this.filterForm.reqcode,
            title:this.filterForm.title,
            client:this.filterForm.client,
            buyer:this.filterForm.buyer,
            curpage:this.curpage,
            pagesize:this.pagesize
         }
         this.axios.post("api/admin/buydetail/filter_costlist_by_page",params).then(res=>{
           if(res.data.code){
             this.tableData=res.data.list;
             this.numrows=parseInt(res.data.numrows);
           }
         })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleSelectionChange(selection){
        this.selection=selection;
      },
      handleCheckedChanged(selection){
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].checked = false;
        }
        this.sum_select=0;
        for (var i = 0; i < selection.length; i++) {
          var index = this.tableData.indexOf(selection[i]);
          this.tableData[index].checked = true;
          this.sum_select+=parseFloat(this.tableData[index]["readyrmb"]);
        }
        this.sum_select=parseFloat(this.sum_select).toFixed(2);
      },
      handleConfirm(){
          this.dialogVisible=false;

          let list=[];
          this.selection.forEach((item)=>{
              list.push({
                id:-1,
                buydid:item.did,
                buyid:item.id,
                buycode:item.reqcode,
                buyer:item.buyer,
                buyerid:item.buyerid,
                seller:item.seller,
                sellerid:item.sellerid,
                tickettype:item.tickettype,
                title:item.title,
                model:item.model,
                brand:item.brand,
                unit:item.unit,
                price:item.price,
                count:item.readycount,
                total:item.readyrmb,
              })
          })

        console.log(list);
        this.$emit("comfirm",list);

      }
    }
  }
</script>

<style>
</style>
